<template>
  <div>
    <el-button type="primary" @click="addListening">添加听力</el-button>
    <el-dialog
      title="英语听力"
      :visible.sync="dialogFormVisible"
      label-width="80px"
    >
      <el-form :model="form">
        <el-form-item label="题目名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="音频src">
          <el-input v-model="form.src"></el-input>
        </el-form-item>
        <el-form-item label="题目1-2">
          <el-input
            placeholder="请输入答案"
            v-model="form.question[0][0].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[0][0].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[0][0].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[0][0].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[0][0].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[0][1].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[0][1].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[0][1].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[0][1].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[0][1].item4"
          ></el-input>
        </el-form-item>
        <el-form-item label="题目3-4">
          <el-input
            placeholder="请输入答案"
            v-model="form.question[1][0].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[1][0].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[1][0].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[1][0].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[1][0].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[1][1].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[1][1].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[1][1].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[1][1].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[1][1].item4"
          ></el-input>
        </el-form-item>
        <el-form-item label="题目5-7">
          <el-input
            placeholder="请输入答案"
            v-model="form.question[2][0].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[2][0].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[2][0].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[2][0].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[2][0].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[2][1].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[2][1].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[2][1].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[2][1].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[2][1].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[2][2].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[2][2].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[2][2].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[2][2].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[2][2].item4"
          ></el-input>
        </el-form-item>
        <el-form-item label="题目8-11">
          <el-input
            placeholder="请输入答案"
            v-model="form.question[3][0].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[3][0].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[3][0].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[3][0].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[3][0].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[3][1].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[3][1].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[3][1].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[3][1].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[3][1].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[3][2].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[3][2].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[3][2].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[3][2].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[3][2].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[3][3].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[3][3].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[3][3].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[3][3].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[3][3].item4"
          ></el-input>
        </el-form-item>
        <el-form-item label="题目12-15">
          <el-input
            placeholder="请输入答案"
            v-model="form.question[4][0].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[4][0].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[4][0].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[4][0].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[4][0].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[4][1].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[4][1].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[4][1].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[4][1].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[4][1].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[4][2].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[4][2].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[4][2].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[4][2].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[4][2].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[4][3].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[4][3].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[4][3].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[4][3].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[4][3].item4"
          ></el-input>
        </el-form-item>
        <el-form-item label="题目16-18">
          <el-input
            placeholder="请输入答案"
            v-model="form.question[5][0].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[5][0].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[5][0].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[5][0].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[5][0].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[5][1].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[5][1].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[5][1].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[5][1].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[5][1].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[5][2].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[5][2].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[5][2].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[5][2].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[5][2].item4"
          ></el-input>
        </el-form-item>
        <el-form-item label="题目19-21">
          <el-input
            placeholder="请输入答案"
            v-model="form.question[6][0].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[6][0].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[6][0].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[6][0].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[6][0].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[6][1].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[6][1].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[6][1].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[6][1].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[6][1].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[6][2].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[6][2].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[6][2].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[6][2].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[6][2].item4"
          ></el-input>
        </el-form-item>
        <el-form-item label="题目22-25">
          <el-input
            placeholder="请输入答案"
            v-model="form.question[7][0].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[7][0].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[7][0].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[7][0].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[7][0].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[7][1].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[7][1].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[7][1].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[7][1].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[7][1].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[7][2].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[7][2].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[7][2].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[7][2].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[7][2].item4"
          ></el-input>

          <el-input
            placeholder="请输入答案"
            v-model="form.question[7][3].answer"
          ></el-input>
          <el-input
            placeholder="请输入选项A"
            v-model="form.question[7][3].item1"
          ></el-input>
          <el-input
            placeholder="请输入选项B"
            v-model="form.question[7][3].item2"
          ></el-input>
          <el-input
            placeholder="请输入选项C"
            v-model="form.question[7][3].item3"
          ></el-input>
          <el-input
            placeholder="请输入选项D"
            v-model="form.question[7][3].item4"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitListening">确 定</el-button>
      </div>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="名称" width="120"> </el-table-column>
      <el-table-column prop="_id" label="id" width="120"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClick(scope.row)" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import englishApi from "@/api/tiku/english";
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      currentPage: 1,
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: "",
        src: "",
        question: [
          [
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
          ],
          [
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
          ],
          [
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
          ],
          [
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
          ],
          [
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
          ],
          [
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
          ],
          [
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
          ],
          [
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
            {
              answer: "",
              item1: "",
              item2: "",
              item3: "",
              item4: "",
            },
          ],
        ],
      },
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    getEnglishListening: async function () {
      let res = await englishApi.getEnlgihsListening(this.currentPage);
      if (res.code == 20000) {
        this.tableData = [];
        let data = res.data.data;
        for (let i = 0; i < data.length; i++) {
          const element = data[i];
          const obj = JSON.parse(element);
          let { _id, name, section, src } = obj;
          this.tableData.push({ _id, name, section, src });
        }
      }
    },
    addListening:async function(){
      this.dialogFormVisible=true
    },
    handleClick: async function (e) {
      let { _id, name, section, src } = e;
      console.log(_id, name, section, src);
      this.dialogFormVisible = true;
    },
    submitListening: async function () {
      console.log(JSON.stringify(this.form));
      let res = await englishApi.saveListening(this.form);
      if ((res.code = 20000)) {
        this.$message({ message: "添加成功", type: "success" });
      } else {
        this.$message.error("添加失败");
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getEnglishListening();
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>